<template>
  <div>
    <el-row style="margin: 10px 0 10px 0" type="flex" justify="start">
      <el-col span="auto" style="margin-right: 5px">
        <el-popover placement="right" trigger="click">
          <UserInfoCardVue :userId="post.fromUser.id"></UserInfoCardVue>
          <el-avatar :src="poster.imgUrl" :size="45" slot="reference" @click="getUserId(post.fromUser.id)"></el-avatar>
        </el-popover>
      </el-col>
      <el-col span="auto">
        <el-row>
          <el-tag effect="dark" size="mini" :type="postTypeTag[post.type]" style="margin-right: 10px">{{
            postType[post.type] }}</el-tag>
          <span style="font-weight: bold; margin-right: 10px" v-html="poster.nickname"></span>
          <el-tag size="mini" style="margin-right: 5px" :type="reviewStatusTag[post.reviewStatus]">{{
            reviewStatus[post.reviewStatus] }}</el-tag>
          <el-tag size="mini" :type="completeStatusTag[post.completeStatus]">{{ completeStatus[post.completeStatus]
          }}</el-tag>
        </el-row>
        <el-row class="box">
          <span style="margin-right: 5px">{{ post.gmtCreate }}</span>
          <i class="el-icon-location-outline"></i>
          <span v-html="post.address"></span>
          <el-popover placement="right" trigger="click">
            <UserInfoCardVue :userId="post.toUserId"></UserInfoCardVue>
            <el-button size="mini" plain type="primary" slot="reference" @click="getToUserId(post.toUserId)"
              v-show="!!post.toUserId" style="margin-left: 40px;">{{ completeType[post.type] }}</el-button>
          </el-popover>
        </el-row>
      </el-col>
    </el-row>
    <el-row>
      <span v-html="post.title"></span>
    </el-row>
    <el-row class="post-content">{{ post.detail }}</el-row>
    <el-row>
      <el-avatar :src="postImage" shape="square" :size="140" fit="fit" v-show="hasImg"></el-avatar>
    </el-row>
    <el-row class="box">
      <el-col span="auto">
        <el-tag style="margin-right: 5px">{{ post.itemTypeName }}</el-tag>
      </el-col>
      <el-col span="auto">
        <el-button type="success" size="mini" @click="forMoreDetail">查看详情</el-button>
      </el-col>
      <el-col span="auto">
        <EditPost :postId="post.id" style="width: auto"
          v-show="!post.completeStatus ? post.fromUser.id === this.user.id : false"></EditPost>
      </el-col>
      <el-col span="auto">
        <DeletePost :postId="post.id" style="width: auto" v-show="post.fromUser.id === user.id"></DeletePost>
      </el-col>
    </el-row>
    <el-divider></el-divider>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import PostAbstract from "@/components/post/PostAbstract.vue";
import EditPost from "@/views/home/mine/components/dialog/EditPost.vue";
import DeletePost from "@/views/home/mine/components/dialog/DeletePost.vue";
import UserInfoCardVue from "./dialog/UserInfoCard.vue";

export default {
  name: "MyPost",
  components: { DeletePost, EditPost, PostAbstract, UserInfoCardVue },
  props: {
    post: Object
  },
  data() {
    return {
      user: {},
      poster: this.post.fromUser,
      postImage: '',
      hasImg: false,
      userDialogue: false,
      toUserDialogue: false,
      postType: ['寻物', '认领'],
      postTypeTag: ['success', ''],
      reviewStatus: ['未审核', '审核未通过', '审核通过'],
      reviewStatusTag: ['info', 'danger', 'success'],
      completeStatus: ['未完成', '已完成'],
      completeStatusTag: ['info', 'success'],
      completeType: ['拾取人', '认领人']
    }
  },
  methods: {
    forMoreDetail() {
      this.$router.push({
        name: 'post',
        query: {
          id: this.post.id,
          from: 'mine'
        }
      })
    },
    getUserId(userId) {
      this.userDialogue = true
      this.userId = Number(userId)
    },
    getToUserId(userId) {
      this.toUserDialogue = true
      this.userId = Number(userId)
    }
  },
  created() {
    this.user = JSON.parse(Cookies.get("user"))
    if (this.post.address === '') {
      this.post.address = '未知'
    }
    if (this.post.postImageList !== null) {
      this.hasImg = true
      this.postImage = this.post.postImageList[0].imgUrl
    } else {
      this.hasImg = false
    }
  }
}
</script>

<style lang="scss" scoped>
.review-tag {
  margin-right: 5px
}

.box {
  margin-top: 6px;
  font-size: 12px;
  color: #727272;
}

.post-content {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 13px;
  color: #8c939d
}

.el-col {
  margin-right: 9px;
}
</style>
